import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:toast/toast.dart';
import 'package:yi_shop/utils/clipboard.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/radian.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';
import 'package:yi_shop/utils/tools.dart';

class WalletBankListController extends GetxController {}

class WalletBankPage extends GetView<WalletBankListController> {
  const WalletBankPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        leading: ToolsUtils.builderLeading(),
        title: Text(
          '银行卡列表',
          style: StylesUtils.customTextStyle(
              fontSize: StylesUtils.fontSize18, fontWeight: FontWeight.w700),
        ),
        actions: [
          IconButton(
              onPressed: () {},
              icon: const Icon(
                Icons.add,
                size: 20,
                color: Colors.white,
              ))
        ],
      ),
      body: ListView(
        children: [
          Container(
            margin: const EdgeInsets.only(top: 15),
            alignment: Alignment.center,
            child: Container(
              constraints: const BoxConstraints.expand(width: 335, height: 140),
              decoration: BoxDecoration(
                  gradient: LinearGradient(colors: [
                    ColorsUtils.rgba(93, 160, 215, 1),
                    ColorsUtils.rgba(93, 160, 215, 1),
                    ColorsUtils.rgba(80, 134, 204, 1),
                    ColorsUtils.rgba(65, 107, 191, 1),
                    ColorsUtils.rgba(65, 107, 191, 1),
                  ], stops: const [
                    0,
                    0,
                    0.51,
                    1.0,
                    1.0
                  ], transform: GradientRotation(RadianUtils.angleToRadian(90))),
                  borderRadius: BorderRadius.circular(5)),
              padding: const EdgeInsets.only(top: 20, left: 20, right: 15),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.white,
                    radius: 17.5,
                    child: SvgUtils.assetName('u15152', width: 20, height: 21),
                  ),
                  Expanded(
                      child: Padding(
                    padding: const EdgeInsets.only(left: 10),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '交通银行',
                          style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize18),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 10),
                          child: Text(
                            '信用卡',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorE4e4, fontSize: StylesUtils.fontSize12),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 30),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text.rich(TextSpan(children: [
                                TextSpan(
                                    text: '****  ****  **** ',
                                    style:
                                        StylesUtils.customTextStyle(color: ColorsUtils.colorE4e4)),
                                TextSpan(text: '8756', style: StylesUtils.customTextStyle())
                              ])),
                              InkWell(
                                onTap: () {
                                  ToastContext().init(context);
                                  Toast.show('复制成功',
                                      duration: 2, gravity: Toast.center, backgroundRadius: 5);
                                  ClipboardUtils.controlC('6227981179188756');
                                },
                                child: Text(
                                  '复制卡号',
                                  style: StylesUtils.customTextStyle(),
                                ),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ))
                ],
              ),
            ),
          ),
          Container(
            margin: const EdgeInsets.only(top: 15),
            alignment: Alignment.center,
            child: Container(
              constraints: const BoxConstraints.expand(width: 335, height: 140),
              decoration: BoxDecoration(
                  gradient: LinearGradient(colors: [
                    ColorsUtils.rgba(102, 153, 204, 1),
                    ColorsUtils.rgba(102, 153, 204, 1),
                    ColorsUtils.rgba(52, 139, 124, 1),
                    ColorsUtils.rgba(0, 150, 136, 1),
                    ColorsUtils.rgba(0, 150, 136, 1),
                  ], stops: const [
                    0,
                    0,
                    0.38,
                    0.80,
                    1.0
                  ], transform: GradientRotation(RadianUtils.angleToRadian(90))),
                  borderRadius: BorderRadius.circular(5)),
              padding: const EdgeInsets.only(top: 20, left: 20, right: 15),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.white,
                    radius: 17.5,
                    child: SvgUtils.assetName('u15161', width: 20, height: 21),
                  ),
                  Expanded(
                      child: Padding(
                    padding: const EdgeInsets.only(left: 10),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '农业银行',
                          style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize18),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 10),
                          child: Text(
                            '储蓄卡',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorE4e4, fontSize: StylesUtils.fontSize12),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 30),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text.rich(TextSpan(children: [
                                TextSpan(
                                    text: '****  ****  **** ',
                                    style:
                                        StylesUtils.customTextStyle(color: ColorsUtils.colorE4e4)),
                                TextSpan(text: '8756', style: StylesUtils.customTextStyle())
                              ])),
                              InkWell(
                                onTap: () {
                                  ToastContext().init(context);
                                  Toast.show('复制成功',
                                      duration: 2, gravity: Toast.center, backgroundRadius: 5);
                                  ClipboardUtils.controlC('6227981179188756');
                                },
                                child: Text(
                                  '复制卡号',
                                  style: StylesUtils.customTextStyle(),
                                ),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ))
                ],
              ),
            ),
          ),
          Container(
            margin: const EdgeInsets.only(top: 15),
            alignment: Alignment.center,
            child: Container(
              constraints: const BoxConstraints.expand(width: 335, height: 140),
              decoration: BoxDecoration(
                  gradient: LinearGradient(colors: [
                    ColorsUtils.rgba(254, 136, 114, 1),
                    ColorsUtils.rgba(254, 136, 114, 1),
                    ColorsUtils.rgba(255, 112, 108, 1),
                    ColorsUtils.rgba(254, 86, 101, 1),
                    ColorsUtils.rgba(254, 86, 101, 1),
                  ], stops: const [
                    0,
                    0,
                    0.38,
                    0.78,
                    1.0
                  ], transform: GradientRotation(RadianUtils.angleToRadian(90))),
                  borderRadius: BorderRadius.circular(5)),
              padding: const EdgeInsets.only(top: 20, left: 20, right: 15),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.white,
                    radius: 17.5,
                    child: SvgUtils.assetName('u15159', width: 20, height: 21),
                  ),
                  Expanded(
                      child: Padding(
                    padding: const EdgeInsets.only(left: 10),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '工商银行',
                          style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize18),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 10),
                          child: Text(
                            '储蓄卡',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorE4e4, fontSize: StylesUtils.fontSize12),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 30),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text.rich(TextSpan(children: [
                                TextSpan(
                                    text: '****  ****  **** ',
                                    style:
                                        StylesUtils.customTextStyle(color: ColorsUtils.colorE4e4)),
                                TextSpan(text: '8756', style: StylesUtils.customTextStyle())
                              ])),
                              InkWell(
                                onTap: () {
                                  ToastContext().init(context);
                                  Toast.show('复制成功',
                                      duration: 2, gravity: Toast.center, backgroundRadius: 5);
                                  ClipboardUtils.controlC('6227981179188756');
                                },
                                child: Text(
                                  '复制卡号',
                                  style: StylesUtils.customTextStyle(),
                                ),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ))
                ],
              ),
            ),
          ),
          Container(
            margin: const EdgeInsets.only(top: 15),
            alignment: Alignment.center,
            child: Container(
              constraints: const BoxConstraints.expand(width: 335, height: 140),
              decoration: BoxDecoration(
                  gradient: LinearGradient(colors: [
                    ColorsUtils.rgba(254, 136, 114, 1),
                    ColorsUtils.rgba(254, 136, 114, 1),
                    ColorsUtils.rgba(255, 112, 108, 1),
                    ColorsUtils.rgba(254, 86, 101, 1),
                    ColorsUtils.rgba(254, 86, 101, 1),
                  ], stops: const [
                    0,
                    0,
                    0.38,
                    0.78,
                    1.0
                  ], transform: GradientRotation(RadianUtils.angleToRadian(90))),
                  borderRadius: BorderRadius.circular(5)),
              padding: const EdgeInsets.only(top: 20, left: 20, right: 15),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.white,
                    radius: 17.5,
                    child: SvgUtils.assetName('u15158', width: 20, height: 21),
                  ),
                  Expanded(
                      child: Padding(
                    padding: const EdgeInsets.only(left: 10),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '招商银行',
                          style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize18),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 10),
                          child: Text(
                            '信用卡',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorE4e4, fontSize: StylesUtils.fontSize12),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 30),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text.rich(TextSpan(children: [
                                TextSpan(
                                    text: '****  ****  **** ',
                                    style:
                                        StylesUtils.customTextStyle(color: ColorsUtils.colorE4e4)),
                                TextSpan(text: '8756', style: StylesUtils.customTextStyle())
                              ])),
                              InkWell(
                                onTap: () {
                                  ToastContext().init(context);
                                  Toast.show('复制成功',
                                      duration: 2, gravity: Toast.center, backgroundRadius: 5);
                                  ClipboardUtils.controlC('6227981179188756');
                                },
                                child: Text(
                                  '复制卡号',
                                  style: StylesUtils.customTextStyle(),
                                ),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ))
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
